<template>
	<view class="con">
		<view class="title">请填写以下注册信息</view>
		<form @submit="toLogin">
			<view class="item">
				<view class="item-t">
					<image src="../../static/r-icon/r1.png"></image>
					<text>手机</text>
				</view>
				<input v-model="phone" type="text" name="phone" />
			</view>
			<view class="item">
				<view class="item-t">
					<image src="../../static/r-icon/r2.png"></image>
					<text>验证码</text>
				</view>
				<input v-model="smsVerifyCode" type="number" name="smsVerifyCode" />
				<text class="getma" @click="getma">{{ma}}</text>
			</view>
			<!-- <view class="item">
				<view class="item-t">
					<image src="../../static/r-icon/r3.png"></image>
					<text>昵称</text>
				</view>
				<input v-model="phone" type="text" />
			</view> -->
			<view class="item">
				<view class="item-t">
					<image src="../../static/r-icon/r4.png"></image>
					<text>密码</text>
				</view>
				<input v-model="password" type="password" name="password"/>
			</view>
			<view class="item">
				<view class="item-t">
					<image src="../../static/r-icon/r5.png"></image>
					<text>确认密码</text>
				</view>
				<input v-model="q_password" type="password" />
			</view>
			<view class="item">
				<view class="item-t">
					<image src="../../static/r-icon/r6.png"></image>
					<text>邀请码</text>
				</view>
				<input v-model="recommendCode" type="text" name="recommendCode"/>
			</view>
			<button formType="submit" class="btn">注册</button>
		</form>
		<view class="yiyou">已有账号，<text style="color:#F0812D ;" @click="navto">立即登录</text></view>
		<view class="bot">
			<view class="xunze" @click="ty">
				<image src="../../static/r-icon/r7.png" v-if="flag"></image>
			</view>
			我已阅读并同意
			<text style="color:#F0812D ;" @click="to">
				VS注册协议/隐私协议
			</text>
		</view>
	</view>
</template>

<script>
	import {getsms,register,} from"../../api/login.js"
	import {phoneNum} from"../../api/user.js"
	export default {
		data() {
			return {
				mobile:"",
				phone: "",
				flag:false,
				ma:"获取验证码",
				password:"",
				q_password:"",
				recommendCode:'',
				smsVerifyCode:''
			}
		},
		onLoad(e) {
			if(uni.getStorageSync("userInfo")){
				uni.removeStorageSync("userInfo")
			}
			if(e.ma){
				this.recommendCode=e.ma
			}
		},
		onShow() {
			if(uni.getStorageSync("userInfo")){
				uni.removeStorageSync("userInfo")
			}
		},
		methods: {
			to(){
				uni.navigateTo({
					url:"/pages/login/xieyi"
				})
			},
			// 立即注册
			async toLogin(e) {
				if(this.phone.trim()==""){
					this.msg("手机号未填写","none")
					return
				}
				if(this.smsVerifyCode.trim()==""){
					this.msg("验证码未填写","none")
					return
				}
				if(this.password.trim()==""){
					this.msg("密码未填写","none")
					return
				}
				if(this.password!=this.q_password){
					this.msg("2次填写的密码不一致","none")
					return
				}
				if(this.recommendCode.trim()==""){
					this.msg("邀请码未填写","none")
					return
				}
				if(this.flag){
					let data=e.detail.value;
					let res=await this.post(register,data)
					this.msg("注册成功")
					setTimeout(()=>{
						this.navto()
					},1500)
					console.log(res)
				}else{
					this.msg("未勾选用户协议","none")
				}
			},
			navto(){
				uni.navigateTo({
					url:"./login"
				})
			},
			// 点击同意协议
			ty(){
				if(!this.flag){
					this.flag=true
				}else{
					this.flag=false
				}
			},
			// 获取验证码
			async getma(){
				if(this.ma=="获取验证码"){
					if(this.phone.trim()!=''){
						if(this.phone.length<=11){
							if(this.$u.test.mobile(this.phone)){
							}else{
								this.msg("手机号未填写或格式不对","none")
								return
							}
						}
						// 将字母转成大写
						this.phone=this.phone.toUpperCase()
						if(this.phone.length>11){
							if(this.phone.split('')[11]=='V'){
								if(this.$u.test.mobile(this.phone.split('V')[0])){
								}else{
									this.msg("手机号未填写或格式不对","none")
									return
								}
								if(this.$u.test.digits(this.phone.split('V')[1])){
									if(this.phone.split('V')[1]>100){
										console.log(this.phone.split('V'))
										this.msg('子账号不能大于100',"none")
										return
									}
								}else{
									this.msg('子账号格式不对',"none")
									return
								}
							}else{
								this.msg('子账号格式不对',"none")
								return
							}
						}
						let phone=this.phone.substring(0,11)
						let r=await this.get(phoneNum,{phone:this.phone})
						let res=await this.get(getsms,{mobile:phone})
						this.msg("验证码发送成功")
						if(this.ma=="获取验证码"){
							let time = 59;
							let timer = setInterval(() => {
								if (time === 0) {
									clearInterval(timer);
									this.ma="获取验证码"
								} else {
									this.ma = time+"s后获取";
									time--
								}
							}, 1000);
						}
					}else{
						this.msg("手机号未填写或格式不对","none")
					}
				}else{
					this.msg("稍后重试","none")
				}
			}
		}
	}
</script>

<style scoped>
	.xunze{
		border: 1px #666 solid;
		border-radius: 20rpx;
		margin-right: 10rpx;
		width: 26rpx;
		height: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.xunze>image{
		display: block;
		width:26rpx;
		height: 26rpx;
	}
	.bot{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #666666;
		opacity: 1;
		text-align: center;
		margin-top: 30rpx;
	}
	.yiyou {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #666666;
		opacity: 1;
		text-align: center;
		margin-top: 30rpx;
	}

	.btn {
		width: 610rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #F3C44E 0%, #F18D29 53%, #ED6138 100%);
		opacity: 1;
		border-radius: 62rpx;
		margin-top: 60rpx;
		color: #FFFFFF;
	}

	.getma {
		height: 70rpx;
		padding: 10rpx 30rpx;
		border: 1px solid #707070;
		opacity: 1;
		border-radius: 12rpx;
		color: #F0812D;
		font-size: 30rpx;
		position: absolute;
		right: 0;
		bottom: 0;

	}

	input {
		padding-left: 60rpx;
		width: 100%;
		border-bottom: 1px solid #D6D6D6;
		box-sizing: border-box;
		padding-top: 20rpx;
		height: 70rpx;
	}

	.item-t {
		display: flex;
		align-items: center;
	}

	.item-t>image {
		width: 24rpx;
		height: 24rpx;
	}

	.item-t>text {
		font-size: 31rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		color: #333333;
		opacity: 1;
		margin-left: 40rpx;
	}

	.item {
		margin-top: 40rpx;
		position: relative;
	}

	.title {
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 70rpx;
		color: #333333;
		opacity: 1;

	}

	.con {
		padding: 40rpx 80rpx;
		box-sizing: border-box;
	}
</style>
